<script setup>
import { useUserStore } from '@/stores'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { upimage, userMessagechange, userRegistercode } from '/src/api/user.js'
import { Plus, Upload } from '@element-plus/icons-vue'
const userStore = useUserStore()
const router = useRouter()
const {
  user: { name, username, idCard, phone, image, sexs }
} = useUserStore()
const formRef = ref()
const totalSecond = ref(60)
const second = ref(60)
const timer = ref(null)
const userInfo = ref({
  name,
  username,
  password: null,
  idCard,
  phone,
  image,
  sexs,
  code: ''
})
const rules = {
  name: [{ required: true, message: '请输入昵称', trigger: 'change' }],
  username: [{ required: true, message: '请输入用户名', trigger: 'change' }],
  password: [
    { required: false, message: '请输入密码', trigger: 'change' },
    {
      pattern: /^\S{1,15}$/,
      message: '密码必须是1—15位的非空字符',
      trigger: 'change'
    }
  ],
  sexs: [{ required: true, message: '请输入性别', trigger: 'change' }],
  idCard: [{ required: true, message: '请输入学号', trigger: 'change' }],
  phone: [
    { required: true, message: '请输入电话', trigger: 'change' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '电话格式不正确',
      trigger: 'change'
    }
  ],
  code: [{ required: true, message: '请输入验证码', trigger: 'change' }]
}
const onimage = async () => {
  const res = await upimage(fileToUpload.value)
  console.log(res)
  userInfo.value.image = res.data
  await userStore.getUser()
}
const changeusermessage = async () => {
  await formRef.value.validate()
  console.log(userInfo.value)
  const res = await userMessagechange(userInfo.value)
  await userStore.getUser()
  router.push('/user/change')
  location.reload()
  if (res.code == 1) {
    ElMessage.success(res.data)
  } else {
    ElMessage.error(res.data)
  }
}
const uploadRef = ref()
const fileToUpload = ref()
const imgUrl = ref(userStore.user.image)
const onUploadFile = (file) => {
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    imgUrl.value = reader.result
  }
  fileToUpload.value = file.raw
  console.log(fileToUpload.value)
  onimage()
}
const getcode = async () => {
  // ElMessage.success('发送成功')
  if (!timer.value && second.value === totalSecond.value) {
    timer.value = setInterval(() => {
      second.value--
      if (second.value < 1) {
        clearInterval(timer.value)
        timer.value = null
        second.value = totalSecond.value
      }
    }, 1000)
    console.log(userStore.user.email)
    const res = await userRegistercode({ email: userStore.user.email })
    if (res.code == 1) {
      ElMessage.success(res.data)
    } else {
      ElMessage.error(res.data)
    }
  }
}
const options = [
  { value: '男', label: '我是男生' },
  { value: '女', label: '我是女生' },
  { value: '未知', label: '这是私密' }
]
</script>
<template>
  <p style="text-align: center; margin-top: 10px">
    <strong>个人信息修改</strong>
  </p>
  <hr />
  <el-row>
    <el-col :span="6" :offset="2" style="margin-top: 80px">
      <el-upload
        ref="uploadRef"
        class="avatar-uploader"
        :auto-upload="false"
        :show-file-list="false"
        :on-change="onUploadFile"
      >
        <img v-if="imgUrl" :src="imgUrl" class="avatar" />
        <img v-else src="@/assets/avatar.png" class="avatar" />
      </el-upload>
      <br />
      <el-button
        @click="uploadRef.$el.querySelector('input').click()"
        type="primary"
        :icon="Plus"
        size="large"
        >选择图片</el-button
      >
      <el-button type="success" :icon="Upload" size="large" @click="onimage">
        上传头像
      </el-button>
    </el-col>
    <el-col :span="12" style="margin-top: 40px">
      <el-form
        :model="userInfo"
        :rules="rules"
        ref="formRef"
        label-width="50%"
        size="large"
      >
        <el-form-item label="登录名称" prop="username">
          <el-input v-model="userInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="name">
          <el-input v-model="userInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="用户新密码" prop="password">
          <el-input v-model="userInfo.password"></el-input>
        </el-form-item>
        <el-form-item label="用户学号" prop="idCard">
          <el-input v-model="userInfo.idCard"></el-input>
        </el-form-item>
        <el-form-item label="用户性别" prop="sexs">
          <el-select
            v-model="userInfo.sexs"
            placeholder="请选择性别"
            size="large"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="用户电话" prop="phone">
          <el-input v-model="userInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="请输入验证码" prop="code">
          <el-input
            v-model="userInfo.code"
            placeholder="发送到邮箱"
            style="width: 75%"
          ></el-input>
          <el-button @click="getcode" type="primary" style="width: 25%">{{
            second == totalSecond ? '发送' : second + 'S'
          }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changeusermessage"
            >提交修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      border: 3px solid gray;
      width: 278px;
      height: 278px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 278px;
      height: 278px;
      text-align: center;
    }
  }
}
.center-form {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: flex-start; /* 水平方向默认左对齐，如果需要可以改为 center */
  /* 如果需要，可以添加 height 属性，但通常 <el-col> 会根据栅格系统自动设置高度 */
}

// .form {
//   /* 如果有需要，可以为这个 div 添加样式来限制表单的宽度或其他属性 */
// }
</style>
